<!--suppress CssUnusedSymbol -->
<template>
  <div class="common-layout">
    <el-container>
      <el-header>
        <div>
          <el-menu
              :default-active="activeIndex"
              class="el-menu-demo"
              mode="horizontal"
              :ellipsis="false"
              @select="handleSelect"
              :router="true"
          >

            <el-menu-item index="0">
              <div class="logo">LOGO</div>
            </el-menu-item>
            <el-menu-item index="1" :route="{name: 'toDoPage'}">
              内容展示
            </el-menu-item>

            <el-menu-item index="2" :route="{name: 'addToDoPage'}">
              添加内容
            </el-menu-item>
          </el-menu>
        </div>

      </el-header>

      <el-main>
        <RouterView/>
      </el-main>
    </el-container>
  </div>
</template>

<script lang="ts" setup>
import {ref} from 'vue'
import {RouterLink, RouterView} from 'vue-router'
import '/public/index.css'
import {useRouter} from 'vue-router'

const router = useRouter()

const activeIndex = ref('1')
const handleSelect = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}

function goPage(obj: {}) {
  console.log('obj' + obj)
  router.push(obj).then()
}

</script>

<style>

.el-menu--horizontal > .el-menu-item:nth-child(1) {
  margin-right: auto;
}
</style>